*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

html {
  height: 100vh;
}

.container {
  display    : flex;
  flex-flow  : row nowrap;
  align-items: stretch;
  height     : 100vh;
}

.container .ctrl {
  flex            : 480px 0 0;
  padding         : 1em;
  background-color: #3b4393;
  color           : #fff;
  height          : 100%;
}

.container .ctrl h1 {
  text-align: center;
  color     : #fbd260;
}

.container .ctrl h2 {
  color   : #fbd260;
  position: relative;
  margin  : 0.5em;
  cursor  : pointer;
}

.container .ctrl h2:hover::before {
  background-color: #bbccff;
}

.container .ctrl .row {
  padding      : 0.5em;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl .row:first-of-type {
  border-top: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl label {
  display    : inline-block;
  width      : 10em;
  line-height: 2em;
}

.container .ctrl input,
.container .ctrl select {
  position: relative;
  display : inline-block;
  width   : 18em;
  height  : 2em;
}

.container .ctrl input[type=range] {
  top: 0.6em;
}

.container .ctrl input[type=radio] {
  margin: 0 1em;
  width : 1em;
  top   : 0.6em;
}

.container .ctrl h2::before {
  content         : "";
  width           : 4px;
  height          : 20px;
  background-color: #332266;
  position        : absolute;
  left            : -10px;
  top             : 6px;
  transition      : background-color .5s;
}

.container .ctrl code {
  border-radius: 10px;
}

.container .prev {
  flex   : 600px 3 1;
  padding: 1em;
}